<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
<div id="test-body-main">
    <div style="margin-left:350px;height: 30px;width: auto">
        <input type="submit" value="退出" onclick="exit()">
    </div>
    <div class="hello-info">
        欢迎登录信息页
    </div>
    <div>
        <p style="margin-left: 50px" id="username"></p>
        <p style="margin-left: 50px" id="time-date">登陆时间为:</p>
        <div id="text-info">
            <div>
                <textarea id="introduce">

                </textarea>
            </div>
        </div>
        <input type="button" class="button-submit" onclick="setLocalStorage()" value="修改">
    </div>
</div>
<script>
function getLocalStorage(){
    document.getElementById("introduce").innerHTML=localStorage.getItem("str")
}
function setLocalStorage(){
    localStorage.setItem("str",document.getElementById("introduce").value)
}
function setCookie(cookName, cookieVal, expires) {
    let d = new Date();
    d.setDate(d.getDate() + expires)
    document.cookie = cookName + "=" + cookieVal + ";path=/;expires=" + d.toUTCString();
}
function exit(){
    setCookie("user",0,0)
    localStorage.clear();
    window.location.href="test.html";
}
let oName = document.getElementById("username");
let oDate=new Date();
let oBtn = document.getElementById("btn");

window.onload = function (){
    let month=oDate.getMonth()+1;
    document.getElementById("username").innerHTML="当前用户是:"+oName.value;
    document.getElementById("time-date").innerHTML="登陆时间为:"+oDate.getFullYear()+"年"+month+"月"+oDate.getDate()+"日"
    +oDate.getHours()+":"+oDate.getMinutes()+":"+oDate.getSeconds();
    getLocalStorage();
}

getCookie("user");

function getCookie(cookName) {
    let cookie = document.cookie;
    let arr = cookie.split("; ");
    for (let i = 0; i < arr.length; i++){
        let newArr = arr[i].split("=");
        if(newArr[0] == cookName){
            let obj = JSON.parse(newArr[1]);
            oName.value = obj.username;
        }
    }
}
</script>
</body>
</html>